import {FrameModel, Style} from "../adapterModel/model1/FrameModel";
import {SyncDataKey, TriggerFactory} from "../../TriggerFactory";
import {GlobalModel} from "../adapterModel/model1/GlobalModel";
import {CodeUtil} from "../../codeAdapter/CodeUtil";
import Configer from "../config/Configer";
import {UIConfigKey} from "../../../constant/UIConfig";
import TimerUtil from "../../TimerUtil";
import {FrameEvent, frameAdapter} from "../adapter/adapterInterface/model1/IFrameAdapter";
import MathUtil from "../../codeAdapter/MathUtil";
import {GuiKeys} from "../../../controller/model/ControllerOpt";


export class ComponentTree {
    root: Element<any, any>
    private static componentTree = new ComponentTree();
    changeList: Element<any, any>[] = [];
    elementMap: { [key: string]: Element<any, any> } = {};
    static getInstance() {
        return ComponentTree.componentTree;
    }
    addChangeList = (element: Element<any, any>) => {
        this.changeList.push(element);
    }
    registComponent = (id: string | number, element: Element<any, any>) => {
        this.elementMap[id + ''] = element
    }
    getComponent = (id: string | number): Element<any, any> => {
        return  this.elementMap[id + '']
    }
    clear = () => {
        if (GlobalModel.bStop) {
            return;
        }
        this.changeList.map(
            (component, index, array) => {
                render(component, component.parent, true);
            }
        )
        this.changeList.length = 0;
    }

    eventHandler = (event: FrameEvent) => {
        const eventPos: { x: number, y: number } = { x: event.x, y: event.y };
        const elements = this.isBetween(this.root, eventPos);
        return elements;
    }
    isBetween = (element: Element<any, any>, targetPos: { x: number, y: number }): Element<any, any>[] => {
        const elements: Element<any, any>[] = []

        const style = element.props.style;
        // print(`---------${element.realKey}-------------`)

        if (element.useEvent) {
        } else {
            // print('没有注册点击事件返回空数组');
            return []
        }

        // print(JSON.stringify(style))
        if (style?.hidden) {
            // print('隐藏返回空数组');
            return [];
        }
        const size = { w: style?.width ? style.width : 0 , h: style?.height ? style.height : 0 };
        // this.logElementChildKey(element.realKey);

        // const mouseInfo = triggetAdapter.adapter.getMouseEventInfo();
        // print(`窗口起始点X ${mouseInfo.startX} 窗口起始点y ${mouseInfo.startY}， 点击在屏幕上的坐标X ${mouseInfo.screenX} 点击在屏幕上的坐标Y ${mouseInfo.screenY}，  获取到的窗口宽度 ${mouseInfo.width} 获取到的窗口高度 ${mouseInfo.height}， 点击在窗口内的坐标X ${mouseInfo.gameX} 点击在窗口内的坐标Y ${mouseInfo.gameY}`);

        if (!CodeUtil.isNullOrZero(size.w) || !CodeUtil.isNullOrZero(size.h)) {

            const margin = { l: style?.marginL ? style.marginL : 0, t: style?.marginT ? style.marginT : 0 };
            const pos = { x: style?.left ? style.left + margin.l : margin.l, y: style?.top ? style.top + margin.t : margin.t };
            const endPos = { x: pos.x + size.w, y: pos.y + size.h };
            // print(`${targetPos.x} ${targetPos.y}`)
            // print(`${pos.x} ${pos.y}`)
            // print(`${endPos.x} ${endPos.y}`)


            let minX = MathUtil.min(pos.x, endPos.x) - 0.01;
            let maxX = MathUtil.max(pos.x, endPos.x) + 0.01;
            let minY = MathUtil.min(pos.y, endPos.y) - 0.01;
            let maxY = MathUtil.max(pos.y, endPos.y) + 0.01;
            const targetX = targetPos.x;
            const targetY = targetPos.y

            if (targetX >= minX && targetX <= maxX && targetY >= minY && targetY <= maxY) {
            } else {
                // print(`位置不符合条件返回`);
                return [];
            }

            elements.push(element);
        }

        // print(`符合条件`);


        const childs: { [key: string]: Element<any, any> } = element.childEventMap;

        // print(`------------------------------------`)
        CodeUtil.mapObj(childs, (key, child) => {
            // print(`遍历child ${child.props.key}`);
            // this.logElementChildKey(child.realKey);
            const childElems = this.isBetween(child, targetPos);
            if (childElems.length > 0) {
                elements.push(...childElems);
            }
        })

        const renderElement = element.renderElement;
        if (renderElement) {
            // print(`遍历render`);
            // this.logElementChildKey(renderElement);
            const renderElems = this.isBetween(renderElement, targetPos);
            if (renderElems.length > 0) {
                elements.push(...renderElems);
            }
            // print(`遍历render end`);
        }
        return elements;
    }

    logElementChildKey = (key: string) => {
        // print(element);
        // const key: string = element?.realKey;
        if (key) {
            const arr = key.split('_');
            if (arr.length >= 1) {
                const lastItem = arr[arr.length - 1];
                const itemArr = lastItem.split('|')
                const id: number = MathUtil.toNumber(itemArr[0]);
                print(`id: ${id}`);
                if (GuiKeys[id]) {
                    print(`GuiKey: ${GuiKeys[id]}`);
                } else {
                    print(`key: ${key} 没有找到对应的GuiKey`);
                }

                return id;
            }
        }
    }

    setUseEvent (this: void, node: Element<any, any>, use: boolean) {
        node.useEvent = use;
        const parent = node.parent;
        if (parent) {
            // print('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
            // print(`设置父节点使用点击事件 ${use}`);
            // print(`node.realKey ${node.realKey}`);
            // ComponentTree.getInstance().logElementChildKey(node.realKey);
            // print('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
            if (parent.useEvent !== use) {
                ComponentTree.getInstance().setUseEvent(parent, use);
            }
        } else {
            // print('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
            // print('没有父节点, 设置使用点击事件失败');
            // ComponentTree.getInstance().logElementChildKey(node.realKey);
            // print('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
        }
    }

}

export enum SyncId {
    onlyOneOpen,
    closeUI,
    chooseHero,
    useAppearance,
    callBack,
    release,
    chooseItem,
    chooseAch,
    resumeHero,
    selectPet,
    selectHero,
    toastTask,
    loseTask,
    chooseDiff,
    chooseArchive,
    loseArchive,
    consumeExp,
    useIntegral,
    doActionByStr,
    buyItem,
    dropItem,
    sellItem,
    washItem,
    decomposeItem,
    forgItem,
    useItem,
    unUseItem,
    tidyUpItems,
    moveTargetItemIndex,
    setTargetItemByIndex,
    useItemByIndex,
    useAbility,
    // setTargetEffect,
}

export interface UISyncData {
    id: SyncId;
    param: any;
}

export interface IProps {
        key: string | number;
        target?: boolean;
        childs?: Element<any, any>[];
}
export interface IStates {
    visible: boolean;
}
export abstract class Element<Prop, State> {

    props: IProps & Prop;
    state: IStates & State;
    parent: Element<any, any>;
    renderElement: Element<any, any>;


    useEvent: boolean = false;
    realKey: string = '';
    
    childEventMap: { [key: string]: Element<any, any> } = {};

    // 网易的录像功能只能记录发布出去的动作，所以一些ui使用的多端同步关闭的方式，这种情况下关闭会有一定延迟，需要有一个flog属性来阻止多次点击
    // enable: boolean;

    constructor(props: IProps & Prop) {
        this.props = props;
    }

    setState = (state: (IStates & State), bForce: boolean = false) => {
        const oldJson = JSON.stringify(this.state);
        const newJson = JSON.stringify(state);
        if (oldJson === newJson) {
        } else {
            this.state = state;
            if (bForce) {
                render(this, this.parent, true);
            } else {
                ComponentTree.getInstance().addChangeList(this)
            }
        }
    }

    abstract render: () => Element<any, any>;

    componentWillMount: () => boolean;

    getVisible = (): boolean => {
        return this.state?.visible;
    }
    close () {
        this.setState({
            ...this.state,
            visible: false,
        })
    };
}

export function createElement (types, config, ...childrens) {
    // let key = null;
    // let ref = null;
    // let self = null;
    // let source = ;
    let ref = config.ref === undefined ? null : config.ref;

    let self = config.__self === undefined ? null : config.__self;
    let source = config.__source === undefined ? null : config.__source;
    let parent = config.parent === undefined ? null : config.parent;

    let key = config.key === undefined ? null : config.key;
    const ret = getChildsByElement(config, childrens);
    config.childs = ret.arr;
    config.text = ret.text;

    if (config.style) {
    } else {
        config.style = {};
    }


    return ReactElement(
        types,
        key,
        ref,
        self,
        source,
        null,
        config,
    );
}

const getChildsByElement = (props: IProps, childrens: (Element<any, any> | string | [])[]) => {
    const retArr: Element<any, any>[] = [];
    let text = '';
    const childrenLength = childrens?.length ? childrens.length : 0;
    for (let i = 0; i < childrenLength; i++) {
        const child = childrens[i];
        const arr: [] = child as [];
        if (child && (typeof(child)==='string' || typeof(child)==='number')) {
            text = text + child
        } else if (arr && arr.length && arr.length > 0) {
            const ret = getChildsByElement(props, arr);
            const tempRet = ret.arr;
            retArr.push(...tempRet);
        } else if (child instanceof Element) {
            retArr.push(child);
        }
    }
    return { text, arr: retArr };
}

const ReactElement = function (type, key, ref, self, source, owner, props) {
    const element = new type(props);
    // Object.freeze(element.props);
    // Object.freeze(element);
    return element
}

export const render = function (element: Element<any, any>, parent?: Element<any, any>, bForce: boolean = false) {

    const props = element?.props;

    if (parent) {
    } else {
        parent = ComponentTree.getInstance().root;
    }

    if (element) {
    } else {
        return;
    }

    if (element) {
        const key = element.props.key;
        const parentKey = parent?.realKey ? parent.realKey : '';
        const realKey = `${parentKey}_${key}`;
        let oldElement = ComponentTree.getInstance().getComponent(realKey);
        if (oldElement) {
            // if (bForce) {
            // } else {
            //     const oldStyle = oldElement.props.style;
            //     const newStyle = element.props.style;
            //     if (oldStyle && newStyle) {
            //
            //     }
            // }
            element = oldElement;
            element.props = props;
        } else {
            element.realKey = realKey;
            ComponentTree.getInstance().registComponent(realKey, element);
        }


        element.parent = parent;
        const childEventMap: {[key: string]: Element<any, any> } = parent?.childEventMap;
        if (childEventMap) {
            childEventMap[realKey] = element;
        } else {
            parent.props.childs = [element];
        }


    }

    // if (element.props.key === '_210_211_213_214_218|0_219|0') {
    //     print(`-----------------------------------------------------------------------`)
    //     print(JSON.stringify(element.props.style))
    //     print(`-----------------------------------------------------------------------`)
    // }

    const childs: Element<any, any>[] = element?.props?.childs;

    let style = element?.props?.style;
    const hidden = style?.hidden;

    const alpha = style?.alpha;

    // const target = element?.props?.target
    // if (target) {
    //     element?.props?.style && Logger.toastError(`${JSON.stringify(element.props.style)}`)
    // }

    if (style) {
    } else {
        element.props.style = {};
        style = element.props.style;
    }



    const paddingL = style?.paddingL ? style.paddingL : 0;
    const paddingT = style?.paddingT ? style.paddingT : 0;
    const paddingB = style?.paddingB ? style.paddingB : 0;
    const paddingR = style?.paddingR ? style.paddingR : 0;
    const marginL = style?.marginL ? style.marginL : 0;
    const marginB = style?.marginB ? style.marginB : 0;
    const marginR = style?.marginR ? style.marginR : 0;
    const marginT= style?.marginT ? style.marginT : 0;

    let width = style?.width ? style.width : 0;
    let left = style?.left ? style.left : 0;
    let top = style?.top ? style.top : 0;


    const endX = left + marginL + marginR + width;
    const startX = left + marginL + paddingL;
    const startY = top + marginT + paddingT;
    let xFlag = startX;
    let yFlag = startY;
    let childHeight = 0;
    let maxLineHeight = 0;



    if (childs?.length) {
        for (let i = 0; i < childs?.length; i++) {
            const child = childs[i];

            if (child && child.props) {
            } else {
                continue
            }


            let childStyle: Style = child.props?.style;
            if (childStyle) {
            } else {
                child.props.style = {};
                childStyle = child.props.style;
            }

            // 计算位置
            const tempTop = childStyle?.top;
            const tempLeft = childStyle?.left;
            const tempMarginL = childStyle?.marginL ? childStyle.marginL : 0;
            const tempMarginT = childStyle?.marginT ? childStyle.marginT : 0;
            const tempMarginB = childStyle?.marginB ? childStyle.marginB : 0;
            const tempMarginR = childStyle?.marginR ? childStyle.marginR : 0;
            const tempWidth = childStyle?.width ? childStyle.width : 0;
            const tempHeight = childStyle?.height ? childStyle.height : 0;

            if (tempTop && tempLeft) {
            } else {
                const float = childStyle?.float;
                const hidden = childStyle?.hidden;
                if (hidden) {
                } else if (float) {
                    childStyle.left = startX;
                    childStyle.top = startY;
                } else {
                    const childSumW = tempMarginL + tempMarginR + tempWidth

                    const childEndX = xFlag + childSumW;
                    // let bOut = false;
                    if (childEndX > (endX - paddingR) && maxLineHeight > 0) {
                        yFlag = yFlag + maxLineHeight;
                        childHeight = childHeight + maxLineHeight;
                        maxLineHeight = 0;
                        xFlag = startX;
                    }

                    const childSumH = tempMarginT + tempMarginB + tempHeight
                    if (childSumH > maxLineHeight) {
                        maxLineHeight = childSumH
                    }

                    childStyle.top = yFlag;
                    childStyle.left = xFlag;

                    xFlag = xFlag + childSumW;
                }
            }
            if (hidden) {
                childStyle.hidden = hidden;
            }

            if (alpha && alpha !== 1) {
                childStyle.alpha = alpha
            }

        }
    }


    element && element.componentWillMount && element.componentWillMount();
    element.renderElement = element && element.render && element.render();
    if (element.renderElement) {
        if (hidden) {
            element.renderElement.props.style.hidden = hidden;
        }

        if (alpha && alpha !== 1) {
            element.renderElement.props.style.alpha = alpha
        }

        if (left > 0) {
            const temp = element.renderElement.props.style.left
            if (temp) {
            } else {
                element.renderElement.props.style.left = left;
            }
        }
        if (top > 0) {
            const temp = element.renderElement.props.style.top
            if (temp) {
            } else {
                element.renderElement.props.style.top = top;
            }
        }
        render(element.renderElement, element);
    }
    if (childs?.length) {
        for (let i = 0; i < childs?.length; i++) {
            const child = childs[i];
            render(child, element);
        }
    }
}


export interface ViewProp {
    onMouseDown?: (event: FrameEvent) => UISyncData | void;
    onMouseUp?: (event: FrameEvent) => UISyncData | void;
    onMouseEnter?: (event: FrameEvent) => UISyncData | void;
    onMouseLeave?: (event: FrameEvent) => UISyncData | void;
    onMouseWheel?: (event: FrameEvent) => UISyncData | void;
    onMouseRightDown?: (event: FrameEvent) => UISyncData | void;
    stopEvent?: boolean;
    style?: Style;
    text?: string;
}

export class View<PropT, StateT> extends Element<PropT & ViewProp & IProps, StateT> {
    frame: FrameModel;

    // ui防抖
    clickInterval: number = 0;
    rightDownInterval: number = 0;
    wheelInterval: number = 0;
    mouseEnterInterval: number = 0;
    mouseLeaveInterval: number = 0;


    componentWillMount = () => {
        return true;
    }

    constructor(props: PropT & ViewProp & IProps) {
        super(props);
    }


    onMouseDown (event: FrameEvent) {
        GlobalModel.bAsync = true;
        const clickFun = this.props.onMouseDown;
        const checkInterval = (this.clickInterval === 0);
        if (clickFun && checkInterval) {
            const marginL = this.props.style.marginL ? this.props.style.marginL : 0;
            const marginT = this.props.style.marginT ? this.props.style.marginT : 0;

            const left = this.props.style.left ? this.props.style.left : 0;
            const top = this.props.style.top ? this.props.style.top : 0;

            event.x = marginL + left
            event.y = marginT + top
            const data: UISyncData | void = clickFun(event);
            if (data) {
                TriggerFactory.getInstance().SyncObjData(SyncDataKey.uiEvent, data)
            }
            // print('-------------------------------------');

            this.clickInterval = 1
            const eventInterval = Configer.getUIConfig(UIConfigKey.eventInterval);
            TimerUtil.runLater(eventInterval, () => {
                this.clickInterval = 0;
            }, 1)
        }
        GlobalModel.bAsync = false;
    };

    onMouseRightDown (event: FrameEvent) {
        let success = false;
        GlobalModel.bAsync = true;
        const clickFun = this.props.onMouseRightDown;
        const checkInterval = (this.rightDownInterval === 0);
        if (clickFun && checkInterval) {

            const elements = ComponentTree.getInstance().eventHandler(event);

            // print('----------------------------------');
            for (let i = elements.length - 1; i >= 0; i --) {
                const element = elements[i];
                // ComponentTree.getInstance().logElementChildKey(element);
                const clickFun = element.props.onMouseRightDown;
                if (clickFun) {
                    success = true;
                    const data: UISyncData | void = clickFun(event);
                    if (data) {
                        TriggerFactory.getInstance().SyncObjData(SyncDataKey.uiEvent, data)
                    }
                }
            }
            // print('-------------------------------------');

            this.rightDownInterval = 1
            const eventInterval = Configer.getUIConfig(UIConfigKey.eventInterval);
            TimerUtil.runLater(eventInterval, () => {
                this.rightDownInterval = 0;
            }, 1)
        }
        GlobalModel.bAsync = false;
        return success;
    };


    onMouseWheel (event: FrameEvent) {
        let success = false;
        GlobalModel.bAsync = true;
        const wheelFun = this.props.onMouseWheel;
        // const checkInterval = (this.wheelInterval === 0);
        if (wheelFun) {
            const elements = ComponentTree.getInstance().eventHandler(event);

            // print('----------------------------------');
            for (let i = elements.length - 1; i >= 0; i --) {
                const element = elements[i];
                // ComponentTree.getInstance().logElementChildKey(element);
                const wheelFun = element.props.onMouseWheel;
                if (wheelFun) {
                    success = true;
                    const data: UISyncData | void = wheelFun(event);
                    if (data) {
                        TriggerFactory.getInstance().SyncObjData(SyncDataKey.uiEvent, data)
                    }
                }
            }
            // print('-------------------------------------');

            // this.wheelInterval = 1
            // const eventInterval = Configer.getUIConfig(UIConfigKey.eventInterval);
            // TimerUtil.runLater(eventInterval, () => {
            //     this.wheelInterval = 0;
            // }, 1)
        }
        GlobalModel.bAsync = false;
        return success
    };

    onMouseUp (event: FrameEvent) {
        GlobalModel.bAsync = true;
        // const clickFun = this.props.onClick;
        // const checkInterval = (this.clickInterval === 0);
        // if (clickFun && checkInterval) {
        //     const marginL = this.props.style.marginL ? this.props.style.marginL : 0;
        //     const marginT = this.props.style.marginT ? this.props.style.marginT : 0;
        //
        //     const left = this.props.style.left ? this.props.style.left : 0;
        //     const top = this.props.style.top ? this.props.style.top : 0;
        //
        //     const event: Event = { x:  marginL + left, y: marginT + top, player: player };
        //     const data: UISyncData | void = clickFun(event);
        //     if (data) {
        //         TriggerFactory.getInstance().SyncObjData(SyncDataKey.uiEvent, data)
        //     }
        //
        //     this.clickInterval = 1
        //     const eventInterval = Configer.getUIConfig(UIConfigKey.eventInterval);
        //     TimerUtil.runLater(eventInterval, () => {
        //         this.clickInterval = 0;
        //     }, 1)
        // }
        GlobalModel.bAsync = false;
    };
    onMouseEnter (event: FrameEvent) {
        if (this.props.stopEvent) {
            frameAdapter.adapter.stopMouseClick(true);
        }

        GlobalModel.bAsync = true;
        const mouseEnterFun = this.props.onMouseEnter;
        const checkInterval = (this.mouseEnterInterval === 0);
        if (mouseEnterFun && checkInterval) {
            const marginL = this.props.style.marginL ? this.props.style.marginL : 0;
            const marginT = this.props.style.marginT ? this.props.style.marginT : 0;

            const left = this.props.style.left ? this.props.style.left : 0;
            const top = this.props.style.top ? this.props.style.top : 0;

            event.x = marginL + left
            event.y = marginT + top

            const data: UISyncData | void = mouseEnterFun(event);
            if (data) {
                TriggerFactory.getInstance().SyncObjData(SyncDataKey.uiEvent, data)
            }

            // this.mouseEnterInterval = 1
            // const eventInterval = Configer.getUIConfig(ResourceKey.eventInterval);
            // TimerUtil.runLater(eventInterval, () => {
            //     this.mouseEnterInterval = 0;
            // }, 1)
        }
        GlobalModel.bAsync = false;
    };
    onMouseLeave (event: FrameEvent) {
        if (this.props.stopEvent) {
            frameAdapter.adapter.stopMouseClick(false);
        }
        GlobalModel.bAsync = true;
        const mouseLeaveFun = this.props.onMouseLeave;
        const checkInterval = (this.mouseLeaveInterval === 0);
        if (mouseLeaveFun && checkInterval) {
            const marginL = this.props.style.marginL ? this.props.style.marginL : 0;
            const marginT = this.props.style.marginT ? this.props.style.marginT : 0;

            const left = this.props.style.left ? this.props.style.left : 0;
            const top = this.props.style.top ? this.props.style.top : 0;

            event.x = marginL + left
            event.y = marginT + top

            const data: UISyncData | void = mouseLeaveFun(event);
            if (data) {
                TriggerFactory.getInstance().SyncObjData(SyncDataKey.uiEvent, data)
            }

            // this.mouseLeaveInterval = 1
            // const eventInterval = Configer.getUIConfig(ResourceKey.eventInterval);
            // TimerUtil.runLater(eventInterval, () => {
            //     this.mouseLeaveInterval = 0;
            // }, 1)
        }
        GlobalModel.bAsync = false;
    };

    render = (): Element<any, any> => {
        if (this.frame) {
        } else {
            const key = this.realKey;

            this.frame = new FrameModel(key + '');
        }

        let useButton = false;
        const onClick = this.props.onMouseDown;
        const onMouseUp = this.props.onMouseUp;
        const onMouseEnter = this.props.onMouseEnter;
        const onMouseLeave = this.props.onMouseLeave;
        const onMouseRightDown = this.props.onMouseRightDown;
        const onMouseWheel = this.props.onMouseWheel;
        const stopEvent = this.props.stopEvent;
        if (onClick || onMouseEnter || onMouseLeave || onMouseUp || stopEvent) {
            useButton = true;
        }
        if (onMouseRightDown || onMouseWheel) {
            ComponentTree.getInstance().setUseEvent(this, true);
            this.frame.setOnMouseRightDown((pos) => {
                return this.onMouseRightDown(pos)
            })
            this.frame.setOnMouseWheel( (pos) => {
                return this.onMouseWheel(pos)
            })
        }
        if (useButton) {
            if (onClick) {
                this.frame.setOnMouseDown((pos) => {
                    this.onMouseDown(pos)
                    return true;
                })
            }

            if (onMouseUp) {
                this.frame.setOnMouseUp((pos) => {
                    this.onMouseUp(pos);
                    return true;
                })
            }

            if (onMouseEnter) {
                this.frame.setOnMouseEnter((pos) => {
                    this.onMouseEnter(pos)
                    return true;
                })
            }

            if (onMouseLeave) {
                this.frame.setOnMouseLeave( (pos) => {
                    this.onMouseLeave(pos)
                    return true;
                })
            }
        }

        const style: Style = this.props.style;
        // 刷新style
        this.parseStyle(style);

        return;
    }


    parseStyle = (style: Style) => {
        if (style) {
            const hidden = style.hidden;
            const oldHidden = this.frame.style?.hidden
            this.frame.style.hidden = hidden;
            this.frame.setHidden();
            if (hidden && oldHidden) {
                return;
            }
            let tempStyle: any = {};
            if (this.frame.style) {
                CodeUtil.copyValidKey(this.frame.style, tempStyle);
            }

            CodeUtil.copyValidKey(style, this.frame.style);
            this.frame.style.text = this.props.text;

            this.frame.setBorder();
            this.frame.setBackGround();
            this.frame.setText();
            this.frame.setMask();
            this.frame.setSize();
            this.frame.setAbsPoint();
            this.frame.setFontStyle();
            this.frame.setCenter();
            this.frame.setAlpha()
        }
    }
}